<template>
  <button class="kl-button" :class="['kl-button--' + type]">
  <!-- <button class="kl-button" :class="['primary' ? 'kl-button--' + 'primary':  'kl-button--default' ]"> -->
    <slot>默认按钮</slot>
  </button>
</template>

<script>
export default {
  name: 'kl-button',
  // props: ['type']
  // props也可以是一个对象
  /* props: {
    type: String // key表示要校验的属性 校验传递过来type属性
  } */
  props: {
    type: { // 这个type表示使用Button.vue组件传递过来的要校验属性名叫type属性
      type: String, // 当前的属性传递必须为一个字符串
      default: 'default'  // 如果没有传递值 默认值
    }
  }
}
</script>

<style>
.kl-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.kl-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.kl-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
</style>
